<template>
  <view class="com-page" :style="data.topStyle">
    <view class="nav-box" :style="data.navStyle">
      <view class="btn-box">
        <view class="iconfont icon-return" @click="back"></view>
        <view
          class="iconfont icon-home"
          @click="proxy.$utils.goHerf('/pages/home/index/index', 'tabbar')"
        ></view>
      </view>
      <view class="txt">登录</view>
    </view>
    <view class="page-inner">
      <view class="logo-box">
        <image
          class="logo"
          :lazy-load="true"
          :src="`${proxy.$baseUrl.imageUrl}/A/system/logo.png`"
          mode=""
        />
        <view class="txt-box">
          <view class="title">登录</view>
          <view class="sub-title">AWUMAMI</view>
        </view>
      </view>
      <view class="login-box" hover-class="login-press" @click="login()"
        >微信登录</view
      >
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive, getCurrentInstance, defineEmits, onMounted } from "vue";
import { updateUser } from "@/apis/member.ts";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["refreshLogin"]);
const data = reactive({
  topStyle: {},
  navStyle: {},
});
onMounted(() => {
  checkLogin();
});
// #ifdef MP-WEIXIN
const systemMenuBtn = proxy.$config.systemMenuBtn();
data.topStyle = {
  "padding-top": ` ${systemMenuBtn.top}px`,
};
data.navStyle = {
  height: `${systemMenuBtn.height}px`,
  "border-radius": `${systemMenuBtn.height / 2}px`,
};
// #endif

const back = () => {
  uni.navigateBack({
    fail: () => {
      proxy.$utils.goHerf("/pages/tool/index/index", "redirect");
    },
  });
};
const checkLogin = async () => {
  let userinfo = uni.getStorageSync("userinfo");
  if (!userinfo.nickName) {
    await proxy.$utils.getUserinfo();
    emit("refreshLogin");
  }
};
const login = async () => {
  let userinfo = uni.getStorageSync("userinfo");
  if (!userinfo.nickName) {
    uni.getUserProfile({
      desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res: any) => {
        updateUser(res.userInfo).then((updateRes: any) => {
          uni.setStorageSync("userinfo", updateRes.data);
          emit("refreshLogin");
        });
      },
    });
  } else {
    emit("refreshLogin");
  }
};
</script>
<style lang="scss" scoped>
@import url("@/static/css/theme.scss");
.com-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: 1002;
  .nav-box {
    position: relative;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn-box {
      position: absolute;
      left: 24rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30rpx;
      border-radius: 30rpx;
      height: 100%;
      border: 1px solid #ccc;

      .icon-return {
        font-size: 34rpx;
        padding: 10rpx 20rpx 10rpx 30rpx;
        font-weight: bold;
      }
      .icon-home {
        font-size: 34rpx;
        padding: 10rpx 30rpx 10rpx 20rpx;
        font-weight: bold;
      }
    }
    .txt {
      font-size: 32rpx;
      font-weight: bold;
    }
  }
  .page-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .logo-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .logo {
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
      }
      .txt-box {
        margin-top: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .title {
          font-size: 32rpx;
          font-weight: bold;
        }
        .sub-title {
          margin-top: 10rpx;
          font-size: 26rpx;
          font-weight: bold;
        }
      }
    }
    .login-box {
      margin-top: 240rpx;
      width: 700rpx;
      height: 90rpx;
      display: flex;
      color: #fff;
      font-size: 28rpx;
      font-weight: bold;
      justify-content: center;
      align-items: center;
      background-color: var(--main-color);
      &.login-press {
        background-color: #f1cd48;
      }
    }
  }
}
</style>
